<script setup lang="ts">
import { ref } from 'vue'
import { queryLetter } from '@/api/letter'
import { Letter } from '@/api/interface'
import AdminTable from '@/components/table/index.vue'
import type { ColumnsInterface } from '@/components/types/table'

const columns: ColumnsInterface[] = [
    {
        label: '信件标题',
        prop: 'title',
        align: 'center',
        width: 150,
        showOverflowTooltip: true
    },
    {
        label: '信件内容',
        prop: 'content',
        align: 'center',
        showOverflowTooltip: true
    },
    {
        label: '当前展示',
        align: 'center',
        width: 200,
        slot: true,
        slotTag: 'current'
    },
    {
        label: '操作',
        align: 'center',
        width: 200,
        slot: true,
        slotTag: 'edit'
    }
]

const letters = ref<Letter.LetterInterface[]>([])
const initialQuery = async () => {
    const result = await queryLetter()
    letters.value = result.map((item) => ({ ...item, title: '一封信' }))
}
initialQuery()

// 点击置顶
const confirmTop = (row: Letter.LetterInterface) => {
    console.log('🌈 —— data-row --->', row)
}
</script>

<template>
    <div class="letter-manage-container base-card">
        <div class="table-container">
            <AdminTable
                :columns="columns"
                :initial="letters"
                :is-pagination="false"
                border
                index
            >
                <template #current="{ scope: { row } }">
                    <span v-if="row.current === '0'">未置顶</span>
                    <span v-if="row.current === '1'">已置顶</span>
                </template>
                <template #edit="{ scope: { row } }">
                    <ElButton
                        type="default"
                        :disabled="row.current === '1'"
                        @click="confirmTop(row)"
                    >
                        置顶
                    </ElButton>
                    <ElButton
                        type="primary"
                        @click="confirmTop(row)"
                    >
                        编辑
                    </ElButton>
                </template>
            </AdminTable>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
